<template>
    <section class="assessmentRelease">
        <el-row :gutter="32" v-loading="pageLoad" :element-loading-text="loadText" element-loading-background="rgba(225, 225, 225, 0.8)">
            <el-col :span="11">
                <el-card v-loading="load" >
                    <div style="min-height: 610px">
                        <div class="titleReleave">
                            <span>任务发布</span>
                        </div>
                        <el-form :inline="false" :model="form" ref="form" class="release-form" label-width="100px" :rules="rules">
                                <el-form-item label="指标年份" prop="taskYear" :rules="{required: true, message: '任务年份不能为空'}">
                                    <el-date-picker v-model="form.taskYear"  type="year" placeholder="请选择任务年份" value-format="yyyy"> </el-date-picker>
                                </el-form-item>
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="任务名称" prop="name">
                                            <el-input v-model="form.name" ></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-col  :span="24">
                                        <el-form-item label="截止日期" prop="endTime">
                                            <el-date-picker v-model="form.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择截止日期">
                                            </el-date-picker>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row v-show="!disabled">
                                    <el-col :span="24">
                                        <el-form-item label="任务类型" prop="type">
                                            <el-select v-model="form.type" :disabled="disabled">
                                                <el-option v-for="item in typeList" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <!-- <div v-if="form.type === '日常工作考核'">
                                    <el-row>
                                        <el-col :span="12">
                                            <el-form-item label="任务季度" prop="taskQuarter">
                                                <el-select v-model="form.taskQuarter">
                                                    <el-option value="第一季度" label="第一季度" key="第一季度"></el-option>
                                                    <el-option value="第二季度" label="第二季度" key="第二季度"></el-option>
                                                    <el-option value="第三季度" label="第三季度" key="第三季度"></el-option>
                                                    <el-option value="第四季度" label="第四季度" key="第四季度"></el-option>
                                                </el-select>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </div> -->
                                <el-row>
                                    <el-col>
                                        <el-form-item label="工作内容" prop="content">
                                            <el-input v-model="form.content" type="textarea"  style="width:340px" :rows="4"></el-input>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row>
                                    <el-form-item label=" ">
                                        <el-button type="primary" class="btnReleave"  @click="submit('form')" size="medium">
                                            <icon name="release" scale="2" class="release-icon" ></icon>
                                            <span style="vertical-align: text-bottom">发 布</span>
                                        </el-button>
                                        <el-button type="warning" class="btn_reset" @click="reWrite('form')" size="medium">
                                            <icon name="reWrite" scale="2" class="release-icon"></icon>
                                            <span style="vertical-align: text-bottom">重 置</span>
                                        </el-button>
                                    </el-form-item>
                                </el-row>
                            </el-form>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="13">
                <el-card>
                    <div>
                        <div class="titleReleave">
                            <span>
                                正在进行
                            </span>
                        </div>
                        <div style="margin-top: 5px" v-loading="loadDetail" element-loading-text="执行列表加载中，请稍后" element-loading-background="rgba(255, 255, 255, 0.8)">
                            <div v-if="hasTask">
                                <div v-for="(item, index) in allTask" @click="trackInfo(item, index)" :key="index" :class="`task_item ${index === currentIndex ? 'active_index' : ''}`">
                                    <div class="detail">
                                        <el-col class="image_box" :span="2">
                                            <img class="image" src="../../static/img/party-logo.png" alt="">
                                        </el-col>
                                        <el-col :span="8">
                                            <span class="detailLabel">任务名称:</span>
                                            <span>{{item.taskName || item.name}}</span>
                                        </el-col>
                                        <el-col :span="5">
                                            <span class="detailLabel">任务年份:</span>
                                            <span>{{item.taskYear ? item.taskYear+'年' : item.taskYear}}</span>
                                        </el-col>
                                        <el-col :span="7">
                                            <span class="detailLabel">任务类型:</span>
                                            <span>{{item.taskType || item.type}}</span>
                                        </el-col>
                                        <el-col :span="2">
                                        <span v-if="item.type=='综合年度考核'&&item.hasGenerateResult==0&&item.generateResultEnable==1" >
                                            <el-tooltip content="生成考核结果" placement="top" popper-class="releaseToolTip">
                                                <div class="resultImage" @click="makeResult(item, index)">
                                                </div>
                                            </el-tooltip>
                                        </span>
                                        </el-col>
                                    </div>
                                </div>
                                <el-pagination
                                    background
                                    :page-sizes="[5, 10, 20, 50]"
                                    :page-size="5"
                                    @current-change="getAllTask"
                                    layout="total, prev, pager, next"
                                    :total="total"
                                >
                                </el-pagination>
                            </div>
                            <div v-else>
                                <el-image src="static/img/csj/noList.png"></el-image>
                            </div>
                        </div>
                        <div class="towMake" style="border-top: 2px dotted #DFDFDF;">
                            <div class="titleReleave" style="margin-top: 15px">
                                <span>执行情况</span>
                            </div>
                        </div>
                        <div v-loading="executeListLoad" class="execute-container">
                            <div v-if="trackList.length>0" >
                                <div v-for="(item, index) in trackList" :style="generateReviewContentStatus(item)"  :key="index" class="task_New">
                                    <div class="detail" style="position: relative;">
                                        <el-image v-if="item.status==='0'" src="../../static/img/csj/tj.png" style="position: absolute;top: -1px;right: 0"></el-image>
                                        <el-image v-if="item.status==='1'" src="../../static/img/csj/sh.png" style="position: absolute;top: -1px;right: 0"></el-image>
                                        <el-image v-if="item.status==='2'" src="../../static/img/csj/tg.png" style="position: absolute;top: -1px;right: 0"></el-image>
                                        <el-image v-if="item.status==='3'" src="../../static/img/csj/qr.png" style="position: absolute;top: -1px;right: 0"></el-image>
                                        <el-col class="image_box_1" :span="4">
                                            <img class="image" src="../../static/img/party-logo.png" alt="">
                                        </el-col>
                                        <el-col :span="18" v-show="item.objectName">
                                            <span style="font-weight: 700;font-size: 16px;">{{item.objectName.replace(/党委/g, '')}}</span>
                                        </el-col>
                                    </div>
                                </div>
                            </div>
                            <div v-else style="margin-left: 300px">
                                <el-image src="static/img/csj/noList.png"></el-image>
                            </div>
                        </div>
                    </div>
                </el-card>
             </el-col>
        </el-row>
    </section>
</template>

<script>
    export default {
        name: "assessmentRelease",
        props:{
            releaseType:{
                type:String,
            }
        },
        data(){
            return{
                taskTypes: {
                    type: Array,
                    default: function () {
                        return ['日常工作考核', '综合年度考核']
                    }
                },
                total: '',
                pageParams: {
                    page: 0,
                    size: 4
                },
                load:false,
                form:{
                    taskYear:'',
                },
                rules:{
                    name: [
                        { required: true, message: '请输入标题', trigger: 'blur' }
                    ],
                    type: [
                        { required: true, message: '请选择类型', trigger: 'blur' }
                    ],
                    endTime: [
                        { required: true, message: '请选择截止时间', trigger: 'blur'}
                    ],
                    taskYear:[
                        { required: true, message: '请选择任务年度', trigger: 'blur'}
                    ],
                    taskQuarter:[
                        { required: true, message: '请选择任务季度', trigger: 'blur'}
                    ]
                },
                typeList:[
                    {
                        label:"基本信息更新",
                        value:"基本信息更新"
                    },
                    {
                        label:"考核指标内容制定",
                        value:"考核指标内容制定"
                    },
                    {
                        label:"考核实施",
                        value:"考核实施"
                    },
                    {
                        label:"职级评定",
                        value:"职级评定"
                    },
                    {
                        label:"日常工作考核",
                        value:"日常工作考核"
                    },
                    {
                        label:"村干部信息更新",
                        value:"村干部信息更新"
                    }
                ],
                checkTypeList: '综合年度考核',
                disabled:false,
                menuVisible:false,
                reviewForm:{
                    fileYear:'',
                },
                firstLevel:false,
                secondLevel:false,
                currentData:{},
                currentNode:{},
                id:1000,
                defaultProps: {
                    id:'quotaId',
                    children: 'kpiQuotas',
                    label: 'quotaName',
                },
                treeData: [],
                resetTreeDate:[],
                addTreeView:false,
                addForm:{
                    isSetWeight:false,
                    quotaScore:'',
                    quotaContent:'',
                    quotaName:'',
                },
                depList:[],
                addMore:false,
                addCild:false,
                edit:false,
                addFirst:true,
                title:'新增指标',
                newTree1 : [],
                taskObj:'',
                releaseList:[],
                scroll:{
                    marginTop:'0px'
                },
                user:{},
                activityList: [],
                totalLoad:false,
                taskContent:'',
                allTask : [],
                trackList:[],
                checkMore:false,
                hasTask:false,
                currentIndex:0,
                loadList:false,
                loadText:'任务页面生成中，请稍后',
                loadDetail:false,
                pageLoad:false,
                executeListLoad:false,
            }
        },
        methods:{
            submit(form){
                let arr =  this.taskObj.substring(0,this.taskObj.length-1).split(',');
                let set = new Set(arr);
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.pageLoad = true;
                        this.loadText='任务发布中，请稍后';
                        setTimeout(()=>{
                            if (this.releaseType == '村干部信息更新') {
                                this.form.taskModule = "IN_SECRETARY";
                            } else {
                                this.form.taskModule = "SECRETARY";
                            }
                            this.$http('POST', `/identity/cadreTask/`, this.form,false).then((data) => {
                                this.$message({
                                    type:'success',
                                    message:'任务发布成功！'
                                });
                                this.form = {};
                                this.initType();
                                this.$refs[form].resetFields();
                                this.getAllTask();
                                this.pageLoad = false;
                            }).catch(() => {
                                this.form = {};
                                this.initType();
                                this.getAllTask();
                                this.$refs[form].resetFields();
                                this.pageLoad = false;
                            })
                        },1000);
                    }
                });
            },
            reWrite(form){
                this.form = {};
                this.initType();
                this.$refs[form].resetFields();
            },
            initType(){
                if(this.releaseType){
                    this.form.type = this.releaseType;
                    this.disabled = true;
                }else{
                    this.form.type = this.checkTypeList;
                    this.disabled = true;
                }
            },
            getDep(){
                this.$http('get','/identity/sysDistrict/quotaDepartments',false).then(data=>{
                    let allTown = {};
                    allTown.label = '所有镇';
                    allTown.value = '';
                    let zhenList = this.$store.state.towns;
                    zhenList.forEach((item)=>{
                        allTown.value+=item.districtId+','
                    });
                    allTown.value = allTown.value.substring(0,allTown.value.length-1);
                    this.depList.push(allTown);
                    data.forEach((item,index)=>{
                        let depItem = {};
                        for (var key in item){
                            depItem.label = item[key];
                            depItem.value = key;
                            this.depList.push(depItem);
                        }
                    })
                })
            },
            showAllTask(){
                if(this.user.sysDistrict.districtLevel == 1) {
                    this.releaseList = [];
                    this.$http('POST', `identity/cadreTask/list?sort=endTime,desc`, false).then(data => {
                        this.releaseList = data;
                    }).catch(_=>{
                        this.$messgae(
                            {
                                type:'warning',
                                message:'活动数据拉取失败，请检查网络'
                            }
                        )
                    });
                } else if (this.user.sysDistrict.districtLevel == 2) {
                    this.releaseList = [];
                    this.$http('POST', `identity/cadreTaskObject/list`, {objectId: this.user.districtId, status: '0'}, false).then(data => {
                        this.releaseList = data;
                    }).catch(_=>{
                        this.$messgae(
                            {
                                type:'warning',
                                message:'活动数据拉取失败，请检查网络'
                            }
                        )
                    });
                }
            },
            loadTotalTaskProcess() {
                this.totalLoad = true;
                this.$http('POST', `/identity/cadreTask/list/completion?year=2020&objectType=Party`, null, false).then(
                    data => {
                        this.activityList = data;
                        this.totalLoad = false;
                    }
                )
            },
            handleScroll(e) {
                document.getElementById('activity-label-key').scrollLeft = e.target.scrollLeft;
                document.getElementById('org-label-key').scrollTop = e.target.scrollTop;
            },
            scrollTo(type) {
                if (type === 'left') {
                    document.getElementById('result-table-content').scrollLeft -= 400;
                    document.getElementById('activity-label-key').scrollLeft -= 400;

                } else {
                    document.getElementById('result-table-content').scrollLeft += 400;
                    document.getElementById('activity-label-key').scrollLeft -= 400;
                }
            },
            checkIsHasTask () {
                this.$http("POST", '/identity/cadreTask/getCurrentTask/考核实施', {}, false).then(
                    data => {
                        if (data) {
                            this.hasTask = true;
                            this.taskContent = data
                        }
                    }
                )
            },
            //获取历年所有考核内容制定指标
            getAllTask(data){
                this.totalLoad = true;
                this.load=true;
                if (data == undefined) {
                    this.pageParams.page = 0;
                } else {
                    this.pageParams.page = data -1;
                }
                let types=["综合年度考核","日常工作考核"];
                this.$http('POST', `/identity/cadreTask/currentTask/list?isReview=0&page=${this.pageParams.page}&size=${this.pageParams.size}`, ["综合年度考核","日常工作考核"], false).then(
                    data => {
                        this.load=false;
                        this.allTask = data.content;
                        this.total = data.totalElements;
                        if (data.content && data.content.length > 0) {
                            this.trackInfo(this.allTask[0]);
                            this.hasTask=true;
                        }
                        this.totalLoad = false;
                    }
                )
            },
            trackInfo(item,index){
                this.executeListLoad=true;
                this.currentIndex = index;
                if(this.user.sysDistrict.districtLevel==1){
                    this.$http('GET',`identity/cadreTask/${item.id}taskId`,false).then(data=>{
                        this.trackList = data;
                        setTimeout(()=>{
                            this.executeListLoad=false;
                        },500);
                    });
                }else if(this.user.sysDistrict.districtLevel==2){
                    this.$http('POST',`identity/villageCadres/list&sort?districtId,asc`,{districtId:this.user.districtId,hasRetire: '0', cadresType:'SECRETARY'},false).then(data=>{
                        this.trackList = data;
                        setTimeout(()=>{
                            this.executeListLoad=false;
                        },500);
                    });
                }
            },
            makeResult(item){
                this.pageLoad = true;
                this.loadText='考核结果生成中，请稍等';
                this.$http('GET',`identity/kPIStatistics/generateKpiResult?taskId=${item.id}`,false).then(data => {
                    setTimeout(_ => {
                        this.pageLoad = false;
                        if (data) {
                            this.$message({
                                type: 'success',
                                message: '考核结果已生成，请前往考核结果、考核分析查看！'
                            })
                        } else {
                            this.$message({
                                type: 'warning',
                                message: '考核结果生成失败，该任务不存在或结果已生成！'
                            })
                        }
                    }, 500);
                }).catch(()=>{
                    this.pageLoad = false;
                    this.$message({
                        type: 'warning',
                        message: '请求错误，请联系系统管理员！'
                    })
                });
            },
            generateReviewContentStatus(item) {
                let style = {
                    'line-height': '50px'
                };
                if (item.status === '0') {
                    style.border = '1px solid #C5C5C5';
                } else if (item.status === '1') {
                    style.border = '1px solid #409EFF';
                } else if (item.status === '2') {
                    style.border = '1px solid #55BD94';
                } else if (item.status === '3') {
                    style.border = '1px solid #409EFF';
                }
                return style;
            },
        },
        watch: {
            'releaseList': {
                handler: function (newVal, oldVal) {
                    if(newVal.length>4){
                        let height = this.releaseList.length*75;
                        let time = (this.releaseList.length-4)*2000;
                        this.scroll.marginTop = `-${height}px`;
                        this.scroll.transition = `${this.releaseList.length*2}s`;
                        setInterval(()=>{
                            if(this.scroll.marginTop == `-${height}px`){
                                this.scroll.marginTop = `0px`;
                                this.scroll.transition = `0s`;
                                setTimeout(()=>{
                                    this.scroll.marginTop = `-${height}px`;
                                    this.scroll.transition = `${this.releaseList.length*2}s`
                                },500)

                            }else{
                                this.scroll.marginTop = `-${height}px`;
                                this.scroll.transition = `${this.releaseList.length*2}s`;
                            }
                        },time)
                    }
                }
            }

        },
        mounted() {
            this.form.taskYear = new Date().getFullYear().toString();
            this.showAllTask();
            this.loadTotalTaskProcess();
            this.getDep();
            this.initType();
            this.checkIsHasTask();
            this.getAllTask();
        },
        created(){
            this.user = JSON.parse(sessionStorage.getItem("userInfo"));
        }
    }
</script>

<style scoped>
    .assessmentRelease{
        font-family:Source Han Sans CN!important;
        overflow: visible;
    }
    .assessmentRelease .release-icon {
        margin-left: 0px;
        position:relative;
        vertical-align: middle;
    }
    .assessmentRelease .release-form {
        text-align: left;
        max-width: 800px;
        vertical-align: top;
        margin-top: 30px;
        padding-top: 20px;
        padding-left: 22px;
        color: #AAAAAA;
    }

    .formulationOfAssessmentIndicators-title{
        font-size: 16px;
        color: #484848;
        text-align: left;
        height: 30px;
        line-height: 30px;
        text-indent: 10px
    }
    .topCardSTyle {
        overflow: hidden;
        min-height: 600px;
        margin-top: 1px !important;
    }
    .tableCol td{
        height: 100px;
        font-size: 16px;
    }
    .tableContent button{
        height: 100px;
        width: 100px;
        padding:3px 3px;
        border-radius:4px;
        background-color: #F4F4F4;
        font-size: 14px;
    }
    .tableContent > tr > td > div{
        height: 25px;
        width: 100px;
    }
    .tableContent .sta-content *{
        width: 150px;
        font-size: 14px;
        color: white;
        height: 35px;
        line-height: 35px;
        letter-spacing: 2px;
        transition: all .3s;
    }
    .tableContent .sta-content :hover{
        cursor: pointer;
        transform: scale(1.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border: 1px transparent;
    }
    .allYearTask span {
        font-size: 14px;
    }
    .taskDetail{
        display: flex;
        text-align: center;
        min-height: 300px;
        border-radius: 10px;
    }
    .townDetailDiv{
        width: 138px;
        font-size: 14px;
        background-color: #43a047;
        height: 70px;
        color: #fff;
        border: 1px solid #fff;
        transition: all .3s;
    }
    .townDetailDiv:hover{
        transform: scale(1.1);
        border: 1px transparent;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    }
    .taskedList {
        cursor: pointer;
    }
    .towMake{
        height: 35px;
        margin: 15px 0;
        border-bottom: 0px;
    }
    .titleReleave{
        text-align: left;
        border-left: 3px solid #55BD94;
    }
    .titleReleave span{
        font-weight:bold;
        font-size:20px;
        padding-left: 10px;
        color: #55BD94;
        font-family:Microsoft YaHei UI;
    }
    .btnReleave{
        border: 1px solid #55BD94;
        width:140px;
        background:rgba(85,189,148,1);
        border-radius:4px;
    }
    .btn_reset{
        width:140px;
        background:#E6A23C;
        border-radius:4px;
    }
   .task_item {
        display: flex;
        margin: 15px 0;
        height: 60px;
        line-height: 56px;
        cursor: pointer;
        transition: all .4s;
        background:#fff;
        border:1px solid rgba(223, 223, 223, 1);
        border-radius:4px;
    }
   .task_New{
       width: 220px;
      background: #fff;
      border-radius: 4px;
      height: 50px;
      margin: 10px 0;
      overflow: hidden;
      float: left;
      margin-left: 50px;
   }
   
 .task_item:hover {
        transform: translateY(3px) scale3d(1,1,1);
        cursor: pointer;
        /*background:rgba(243,254,255,1);*/
        border:1px solid rgba(85, 189, 148, 1);
        border-radius:4px;
    }
   .active_index {
       cursor: pointer;
       background:rgba(243,254,255,1);
       border:1px solid rgba(85, 189, 148, 1);
       border-radius:4px;
    }
    .image_box {
        text-align: center;
        line-height: 64px;
    }
    .left {
        float: left;
        margin-bottom: 10px;
        /*width: 500px;*/
        margin-left: 23px;
        font-size: 18px;
        font-weight: bold;
        text-align: left;
    }
    .task_New .detail{
        text-align: center;
        color: #575757;
    }
    .detail {
        text-align: left;
        align-items: center;
        flex: 1;
    }
    .detail span {
        font-weight: 700;
        font-size:16px;
        font-family: "Microsoft YaHei UI Light";
        color:rgba(57,57,57,1);
    }
    .detail .el-col span:nth-child(1) {
        font-weight: normal;
    }
    .no_task {
        width: 100%;
        text-align: center;
    }
    .task_New span{
        color: #575757;
        font-size:15px;
        font-weight: bolder;
    }
    .zx_detail{
        color: #EDB202;
        font-size: 16px!important;
        font-weight: 700!important;
    }
    .sc_index{
       /* color: #39C667;
        font-size: 16px!important;*/
        line-height: 50px;
    }
    .resultImage{
        width: 32px;
        height: 32px;
        margin-top: 9px;
        background: url("/static/village/getResult.png");
        margin-left: 15px;
    }
    .detailLabel{
        font-size: 16px;
        color: #AAAAAA !important;
    }
    .image_box_1 {
        text-align: center;
        line-height: 55px;
    }


</style>
<style>
    .assessmentRelease .el-pagination.is-background .el-pager li:not(.disabled).active {
        background-color: #55BD94!important;
    }
    .assessmentRelease  .el-pagination {
        margin-top: 10px;
    }
    .releaseToolTip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
        border-top-color:  transparent;
    }
    .releaseToolTip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
        border-top-color:  transparent;
    }
    .releaseToolTip {
        background: #0fbb49 !important;
        font-size: 14px;
        border: 1px #0fbb49 solid!important;
    }
    .assessmentRelease .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 30px;
    }
    .assessmentRelease .el-form-item__label{
        color: #AAAAAA;
    }
    .assessmentRelease .el-pager li.active {
        color: #FFFFFF;
        cursor: default;
    }
    .assessmentRelease .el-pager li:not(.active):hover {
        color: #55BD94 !important;
    }
    .assessmentRelease .execute-container {
        min-height: 300px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-content: flex-start;
    }
    .assessmentRelease .execute-container:after {
        content: "";
        width: 186px;
    }
</style>
